<template>
  <el-menu
    default-active="1"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
  >
    <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 33px;">
      <div style="width: 40px;height: 46px;"><img src="../assets/common/images/login-logo.png" style="width: 100%;height: 100%;"></div>
      <h5>汇客CRM系统</h5>
    </div>
    <el-menu-item index="1">
      <el-icon><House /></el-icon>
      <router-link class="menustyle" to="/">首页</router-link>
    </el-menu-item>
    <el-menu-item index="2">
      <el-icon><Link /></el-icon>
      <router-link class="menustyle" to="/ClueManage" >线索管理</router-link>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon><Connection /></el-icon>
      <router-link class="menustyle" to="/CommercialOpportunityManage" >商机管理 </router-link>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><User /></el-icon>
      <router-link class="menustyle" to="/ContractManage">合同管理 </router-link>
    </el-menu-item>
    <el-menu-item index="5">
      <el-icon><Discount /></el-icon>
      <router-link class="menustyle" to="/CourseManage" >课程管理 </router-link>
    </el-menu-item>
    <el-menu-item index="6">
      <el-icon><MessageBox /></el-icon>
      <router-link class="menustyle" to="/ActivityManage">活动管理 </router-link>
    </el-menu-item>
    <el-menu-item index="7">
      <el-icon><Position /></el-icon>
      <router-link class="menustyle" to="/TicketManage">工单管理 </router-link>
    </el-menu-item>
    <el-menu-item index="8">
      <el-icon><Notification /></el-icon>
      <router-link class="menustyle" to="/StatisticsManage">统计分析</router-link>
    </el-menu-item>
    <el-sub-menu index="10" >
      <template #title>
        <el-icon><Filter /></el-icon>
        <router-link class="menustyle" to="/SystemManage">系统管理</router-link>
      </template>
      <el-menu-item-group>
        <el-menu-item index="10-1">
          <el-icon><location /></el-icon>
          <router-link class="menustyle" to="/SystemManage/secondLevel/NotificationCenter">通知中心</router-link>
        </el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="10-2">
        <template #title>
          <el-icon><location /></el-icon>
          <router-link class="menustyle" to="/SystemManage/secondLevel/AuthorityManagement/thirdLevel/UserManagement">权限管理</router-link>
        </template>
        <el-menu-item index="1-2-1">
          <router-link class="menustyle" to="/SystemManage/secondLevel/AuthorityManagement/thirdLevel/UserManagement">用户管理</router-link>
        </el-menu-item>
        <el-menu-item index="1-2-2">
          <router-link class="menustyle" to="/SystemManage/secondLevel/AuthorityManagement/thirdLevel/roleManagement">角色管理</router-link>
        </el-menu-item>
        <el-menu-item index="1-2-3">
          <router-link class="menustyle" to="/SystemManage/secondLevel/AuthorityManagement/thirdLevel/MenuManagement">菜单管理</router-link>
        </el-menu-item>
        <el-menu-item index="1-2-4">
          <router-link class="menustyle" to="/SystemManage/secondLevel/AuthorityManagement/thirdLevel/DepartmentManagement">部门管理</router-link>
        </el-menu-item>
        <el-menu-item index="1-2-5">
          <router-link class="menustyle" to="/SystemManage/secondLevel/AuthorityManagement/thirdLevel/JobManagement">岗位管理</router-link>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item-group>
        <el-menu-item index="10-3">
          <el-icon><location /></el-icon>
          <router-link class="menustyle" to="/SystemManage/secondLevel/DictionaryManagement">字典管理</router-link>
        </el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group>
        <el-menu-item index="10-4">
          <el-icon><location /></el-icon>
          <router-link class="menustyle" to="/SystemManage/secondLevel/ThreadAllocation">线索配置</router-link>
        </el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group>
        <el-menu-item index="10-5">
          <el-icon><location /></el-icon>
          <router-link class="menustyle" to="/SystemManage/secondLevel/BusinessOpportunityAllocation">商机配置</router-link>
        </el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group>
        <el-menu-item index="10-6">
          <el-icon><location /></el-icon>
          <router-link class="menustyle" to="/SystemManage/secondLevel/SystemLog">系统日志</router-link>
        </el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group>
        <el-menu-item index="10-7">
          <el-icon><location /></el-icon>
          <router-link class="menustyle" to="/SystemManage/secondLevel/logoutSystem">退出系统</router-link>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <div>
      
    </div>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Location,
  House,
  Connection,
  User,
  Link,
  Discount,
  MessageBox,
  Position,
  Notification,
  Filter
} from '@element-plus/icons-vue'
const isCollapse = ref(false)
</script>

<style>
.el-menu-vertical-demo {
  width: 200px;
  height: 100vh;
  background-color: #2b2f3a;
  color: #fff;
  font-size: 20px;
}
.el-menu-item.is-active{
  color: #fff !important;
  background-color: #5dc999;
  border-radius: 0 30px 30px 0;
}
.router-link {
  font-weight: 700;
}

.menustyle{
  text-decoration: none;
  color:#fff;
}
.iconStyle{
  color: #fff;
  size: 20px;
}
.el-menu-item i {
    color: #fff;
}
.el-sub-menu .el-menu {
    background-color: #2b2f3a;
}
.el-sub-menu .el-icon {
    color: #fff;
}
.el-menu-item:hover,.el-menu-item:active {
    background-color: #5dc999;
    border-radius: 0 30px 30px 0;
}
.el-sub-menu__title:hover {
    background-color: #5dc999;
    border-radius: 0 30px 30px 0;
}
</style>
